<template>
    <el-card shadow="never">
        <div slot="header">动态表单(transfer)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/transfer.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        const generateData = _ => {
            const data = [];
            for (let i = 1; i <= 15; i++) {
            data.push({
                key: i,
                label: `备选项 ${ i }`,
                disabled: i % 4 === 0
            });
            }
            return data;
        };
        return {
            schema: {
                properties: {
                    num1: {
                        label: '基本用法',
                        widget: 'transfer',
                        enum: generateData()
                    },
                    num2: {
                        label: '异步',
                        widget: 'transfer',
                        asyncData(resolve) {
                            setTimeout(() => {
                                resolve(generateData())
                            }, 2000)
                        }
                    },
                },
                grid: {
                    row: {
                        gutter: 20
                    }
                }
            },
            formData: { }
        }
    }
}
</script>

<style>

</style>